<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>关于我们</title>
  <meta name="description" content="Midnight.js is a jQuery plugin that lets you sublty change your headers to make them match the content as you scroll." />
  <meta name="keywords" content="js, jquery, scroll, plugin, animation" />
  <meta name="robots" content="INDEX, FOLLOW" />
  <meta name="author" content="Aerolab" />

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />

  <!-- Facebook Stuff -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Midnight.js" />
  <meta property="og:title" content="Midnight.js - Switch fixed headers on the fly" />
  <meta property="og:description" content="Midnight.js is a jQuery plugin that lets you sublty change your headers to make them match the content as you scroll." />
  <meta property="og:image" content="http://aerolab.github.io/midnight.js/assets/images/midnight-facebook.png" />
  <meta property="og:url" content="http://aerolab.github.io/midnight.js" />
  <meta property="fb:app_id" content="344819049029949" />

  <!-- Twitter Stuff -->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="@aerolab" />
  <meta property="twitter:title" content="Midnight.js - Switch fixed headers on the fly" />
  <meta property="twitter:description" content="Midnight.js is a jQuery plugin that lets you sublty change your headers to make them match the content as you scroll." />
  <meta property="twitter:image" content="http://aerolab.github.io/midnight.js/assets/images/midnight-twitter.png" />
  <meta property="twitter:url" content="http://aerolab.github.io/midnight.js" />

  <meta name="X-UA-Compatible" content="IE=edge" />
  <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
  <meta name="apple-mobile-web-app-capable" content="yes" />

  <link href="http://fonts.googleapis.com/css?family=Lato:400,300italic,400bold" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="./static/css/normalize.css" />
  <link rel="stylesheet" href="./static/css/animate.css" />
  <link rel="shortcut icon" href="./static/golf.png">
  <style>
    html,
    body {
      background: white;
      padding: 0;
      margin: 0;
      font-family: "Lato", "Arial", sans-serif;
      line-height: 160%;
      font-size: 16px;
      color: #cccccc;
    }

  </style>
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date();
      a = s.createElement(o),
        m = s.getElementsByTagName(o)[0];
      a.async = 1;
      a.src = g;
      m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-21195039-3', 'aerolab.github.io');
    ga('require', 'displayfeatures');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');

  </script>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <script src="./static/js2/jquery-1.11.1.min.js"></script>
  <script src="./static/js2/sscr.min.js"></script>
  <script src="./static/js2/prism.js"></script>
  <script src="./static/js2/wow.min.js"></script>
  <script src="./static/js2/viewport-units-buggyfill.js"></script>
  <script src="./static/js2/midnight.jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // vh fix for iOS7 (Not that it works well on that anyway)
      viewportUnitsBuggyfill.init();

      $(window).resize(function () {
        viewportUnitsBuggyfill.refresh();
      });

      // Start Midnight!
      $('nav.fixed').midnight();

      // Start wow.js
      new WOW().init();

      // The island disappears when the logo moves on top of it
      var $island = $('#space-island');
      var islandTop = $island.offset().top;
      var windowHeight = $(window).height();

      $(window).resize(function () {
        islandTop = $island.offset().top;
        windowHeight = $(window).height();
      });

      $(document).scroll(function () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var minScrollTop = islandTop - windowHeight * 0.4;
        var maxScrollTop = islandTop;

        // Opacity goes from 1.0 at the bottom 2/3 of the screen to 0.4 at the top
        if (scrollTop <= islandTop * 2) {
          var targetOpacity = 1.0;
          var minOpacity = 0.4;

          if (scrollTop > minScrollTop && scrollTop < maxScrollTop) {
            targetOpacity = ((maxScrollTop - scrollTop) / (maxScrollTop - minScrollTop)) * (1.0 - minOpacity) +
              minOpacity;
          } else if (scrollTop > maxScrollTop) {
            targetOpacity = minOpacity;
          } else if (scrollTop < minScrollTop) {
            targetOpacity = 1.0;
          }

          $island.css('opacity', targetOpacity);
        }

      });

      $('.scroll-prompt').click(function (event) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: $("section.step-one").offset().top - $('nav').height() * 0.5
        }, 1000, 'swing');
      });

      $(window).trigger('resize');

    });

  </script>
</body>

</html>
